import React, { FC } from 'react';
import { Button, Space, Select, Modal } from 'antd';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import { useModel } from 'umi';
import { modelName } from '../../../../index';
import useHoxModel from '../../../../useHoxModel';
import { ActionType } from '@/components/ProTable';
import ConfirmProps from '@/components/CommonModal/Confirm';
const { confirm } = Modal;
const { Option } = Select;

interface ToolBarProps {
  actionRef: React.MutableRefObject<ActionType | undefined>;
}

const ToolBar: FC<ToolBarProps> = ({ actionRef }) => {
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  const {
    getFormAreaList,
    getUserFormAreaList,
    dispatch,
    selectedRowKeys,
    currentPageType,
    sentDownPlanMode,
  } = useHoxModel((model) => [model.selectedRowKeys]);
  return (
    <div className={styles['toolbar-wrap']}>
      <div className={styles['left']}>
        <Space>
          <Button
            className={styles['add']}
            type="primary"
            onClick={async () => {
              getFormAreaList();
              getUserFormAreaList();
              showModal(modelName + 'add');
            }}
          >
            <IconFont type={'iconxinzengquanxian'} />
            <span>全局权限配置</span>
          </Button>
          <Select
            defaultValue={currentPageType}
            className={styles['select-wrap']}
            style={{ width: '120px' }}
            onChange={(value: string) => {
              switch (value) {
                case 'door':
                  dispatch({ currentPageType: 'door' });
                  break;
                case 'user':
                  dispatch({ currentPageType: 'user' });
                  break;
              }
            }}
          >
            <Option value="door">按门</Option>
            <Option value="user">按用户</Option>
          </Select>

          <Button
            type="primary"
            className={styles['delete']}
            onClick={() => {
              confirm({
                ...new ConfirmProps(
                  '根据所选门设备预设的计划模板进行批量下发',
                  '本次操作为实时下发',
                ),
                async onOk() {
                  await new Promise((resolve, reject) => {
                    selectedRowKeys.forEach(async (id, index) => {
                      sentDownPlanMode({ id: Number(id) });
                      if (index === selectedRowKeys.length - 1) {
                        resolve();
                      }
                    });
                  });
                },
              });
            }}
            disabled={!selectedRowKeys[0]}
          >
            <IconFont type={'iconxiafa'} />
          </Button>
        </Space>
      </div>
      <div className={styles['right']}></div>
    </div>
  );
};
export default ToolBar;
